<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>讨论</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <style>
        /*::-webkit-scrollbar{*/
            /*display:none;*/
        /*}*/
        body{
            background-image: url("../static/img/banner_team.jpg");
            background-position: center;
            background-attachment: fixed;
        }
        .mt-60{
            margin-top: 60px;
        }
        .mt-120{
            margin-top: 120px;
        }
        .mb-60{
            margin-bottom: 60px;
        }
        .mb-120{
            margin-bottom: 120px;
        }
        .content {
            z-index: 1;
        }
        .content:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.8);
            z-index: -1;
            background-image: url("../static/img/banner_team.jpg");
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
        }
        .content-deep{
            z-index: 1;
        }
        .content-deep:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: -1;
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
        }
        .h-center{
            margin: 0 auto;
        }
        #myTabDiv{
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 42px;
        }
        #myTabContentDiv{
            z-index: 1;
            position: absolute;
            top: 42px;
            bottom: 0;
            width: 100%;
        }
        .chat-list li{
            list-style: none;
        }
        .chat-list li .chat-img{
            display: inline-block;
            vertical-align: middle;
        }
        .chat-list li .chat-img img{
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: inline-block;

        }

        .chat-list li .chat-content{
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
        }
        .chat-list li .chat-content .box{
            display: inline-block;
            color: #343a40;
            padding: 3px 10px;
            background: #f8f9fa;
        }
        .chat-list li .chat-content h5{
            color: #6c757d;
            font-size: 16px;
        }
        .chat-list li .chat-content .chat-time{
            display: block;
            text-align: left;
            font-size: 10px;
            color: #6c757d;
            margin: 5px 0 15px 65px;
        }
        .chat-list{
            position: absolute;
            left: 50%;
            top: 20px;
            bottom: 120px;
            transform: translate(-50%,0);
            overflow-y: auto;

        }
        .chat-list::-webkit-scrollbar{
            display: none;
        }
    </style>
</head>
<body>
<div id="myTabDiv">
    <ul class="nav nav-tabs content-deep" id="myTab" role="tablist" style="position: relative;width: 100%">
        <a href="javascript:void(0);" style="height: 42px;" class="ml-2" id="showActionBar">
            <i id="showActionBarIcon" class="fa fa-chevron-circle-down fa-2x m-1" aria-hidden="true" style="display: none"></i>
            <i id="hideActionBarIcon" class="fa fa-chevron-circle-right fa-2x m-1" aria-hidden="true" style=""></i>
        </a>
        <li class="nav-item">
            <a class="nav-link active" id="createTeamTab" data-toggle="tab" href="#createTeamPanel" role="tab" aria-controls="createTeam" aria-selected="true">小组1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="joinTeamTab" data-toggle="tab" href="#joinTeamPanel" role="tab" aria-controls="joinTeam" aria-selected="false">小组2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="myTeamTab" data-toggle="tab" href="#myTeamPanel" role="tab" aria-controls="myTeam" aria-selected="false">小组3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="createdTeamTab" data-toggle="tab" href="#createdTeamPanel" role="tab" aria-controls="createdTeam" aria-selected="false">小组4</a>
        </li>
    </ul>
</div>

<div class="tab-content" id="myTabContentDiv">
    <div id="actionBar"  class="content" style="display: none;position: fixed;left: 0px;width: 100%;top: 42px;">
        <div class="d-flex flex-row">
            <div  style="width: 60px;height: 60px;" class="m-2">
                <img class="rounded-circle mx-auto" src="../static/img/banner.jpg" style="width: 40px;height: 40px;display: block;"/>
                <span style="display: block;height: 20px;font-size: 12px;text-align:center;font-family: 'Microsoft YaHei';overflow: hidden">舔狗本狗</span>
            </div>
            <div  style="width: 60px;height: 60px;" class="m-2">
                <img class="rounded-circle mx-auto" src="../static/img/banner.jpg" style="width: 40px;height: 40px;display: block;"/>
                <span style="display: block;height: 20px;font-size: 12px;text-align:center;font-family: 'Microsoft YaHei';overflow: hidden">舔狗本狗</span>
            </div>
            <div  style="width: 60px;height: 60px;" class="m-2">
                <img class="rounded-circle mx-auto" src="../static/img/banner.jpg" style="width: 40px;height: 40px;display: block;"/>
                <span style="display: block;height: 20px;font-size: 12px;text-align:center;font-family: 'Microsoft YaHei';overflow: hidden">舔狗本狗</span>
            </div>
        </div>
    </div>
    <div class="tab-pane fade show active mt-5" id="createTeamPanel" role="tabpanel" aria-labelledby="createTeamTab">
        <ul class="chat-list p-3 col-8 mx-auto">
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>James Anderson</h5>
                    <div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing &amp; type setting industry.</div>
                    <div class="chat-time">10:56 am</div>
                </div>
            </li>
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>Bianca Doe</h5>
                    <div class="box bg-light-info">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
        </ul>
        <div class="row" style="position: fixed;bottom: 50px;left: 50%;transform: translate(-50%,0);width: 60%;">
            <div class="mx-auto w-100 text-center"  >
                <textarea class="border-0 form-control col-8 d-inline-block align-middle" placeholder="输入消息内容" ></textarea>
                <button  type="button" class="btn btn-success   d-inline-block  btn-lg clearfix align-middle"> <i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;发送</button>
            </div>
        </div>
    </div>
    <div class="tab-pane fade mt-120" id="joinTeamPanel" role="tabpanel" aria-labelledby="joinTeamTab">
        <ul class="chat-list p-3 col-8 mx-auto">
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>James Anderson</h5>
                    <div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing &amp; type setting industry.</div>
                    <div class="chat-time">10:56 am</div>
                </div>
            </li>
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>Bianca Doe</h5>
                    <div class="box bg-light-info">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
        </ul>
        <div class="row" style="position: fixed;bottom: 50px;left: 50%;transform: translate(-50%,0);width: 60%;">
            <div class="mx-auto w-100 text-center"  >
                <textarea class="border-0 form-control col-8 d-inline-block align-middle" placeholder="输入消息内容" ></textarea>
                <button  type="button" class="btn btn-success   d-inline-block  btn-lg clearfix align-middle"> <i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;发送</button>
            </div>
        </div>
    </div>
    <div class="tab-pane fade mt-120" id="myTeamPanel" role="tabpanel" aria-labelledby="myTeamTab">
        <ul class="chat-list p-3 col-8 mx-auto">
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>James Anderson</h5>
                    <div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing &amp; type setting industry.</div>
                    <div class="chat-time">10:56 am</div>
                </div>
            </li>
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>Bianca Doe</h5>
                    <div class="box bg-light-info">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
        </ul>
        <div class="row" style="position: fixed;bottom: 50px;left: 50%;transform: translate(-50%,0);width: 60%;">
            <div class="mx-auto w-100 text-center"  >
                <textarea class="border-0 form-control col-8 d-inline-block align-middle" placeholder="输入消息内容" ></textarea>
                <button  type="button" class="btn btn-success   d-inline-block  btn-lg clearfix align-middle"> <i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;发送</button>
            </div>
        </div>
    </div>
    <div class="tab-pane fade mt-120" id="createdTeamPanel" role="tabpanel" aria-labelledby="createdTeamTab">
        <ul class="chat-list p-3 col-8 mx-auto">
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>James Anderson</h5>
                    <div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing &amp; type setting industry.</div>
                    <div class="chat-time">10:56 am</div>
                </div>
            </li>
            <li>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
                <div class="chat-content">
                    <h5>Bianca Doe</h5>
                    <div class="box bg-light-info">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
            <li class="text-right">
                <div class="chat-content">
                    <h5>Steave Doe</h5>
                    <div class="box bg-light-inverse">It’s Great opportunity to work.</div>
                    <div class="chat-time">10:57 am</div>
                </div>
                <div class="chat-img"><img src="../static/img/banner.jpg" alt="user"></div>
            </li>
        </ul>
        <div class="row" style="position: fixed;bottom: 50px;left: 50%;transform: translate(-50%,0);width: 60%;">
            <div class="mx-auto w-100 text-center"  >
                <textarea class="border-0 form-control col-8 d-inline-block align-middle" placeholder="输入消息内容" ></textarea>
                <button  type="button" class="btn btn-success   d-inline-block  btn-lg clearfix align-middle"> <i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;发送</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var isActionBarShow = false;

        $("#showActionBar").click(function () {

            if (isActionBarShow) {
                $("#actionBar").hide(500);
                $("#showActionBarIcon").hide();
                $("#hideActionBarIcon").show();
                isActionBarShow = false;
            }else{
                $("#actionBar").show(500);
                $("#showActionBarIcon").show();
                $("#hideActionBarIcon").hide();
                isActionBarShow  = true;
            }

        })

    })
</script>
</body>
</html>